<template>
  <customCard :hideTitle="true" :bordered="true" class="custom-statistic"
              :style="{width: strings.defaultIfBlank(width, 'auto'),
              height: strings.defaultIfBlank(height, 'auto'),
              marginRight: strings.defaultIfBlank(marginRight, ''),
  }">
    <template #content>
      <div class="title">
        {{title}}
      </div>

      <div class="value-box" :style="{color: color}">
        <span class="icon-left">
<!--          <icon name="search" />-->
        </span>
        <span class="value">
          <vueCountTo :startVal='1' :endVal='value' :duration='3000'></vueCountTo>
        </span>
        <span class="unit">{{unit}}</span>
      </div>

      <div class="extra">
        <span>{{extra}}</span>
      </div>
    </template>
  </customCard>
</template>

<script>
import customCard from '@/components/custom/layout/customCard'
import vueCountTo from 'vue-count-to'
import { Icon } from 'tdesign-icons-vue'
export default {
  desc: '自定义统计数值',
  name: 'customStatistic',
  props: {
    // 标题
    title: {
      type: String,
      default: () => '标题',
    },
    // 值
    value: {
      type: Number,
      default: () => 0,
    },
    // 单位
    unit: {
      type: String,
      default: () => '单位'
    },
    // 趋势。可选项：increase 增长 decrease 减少
    trend: {
      type: String,
      default: () => ''
    },
    // 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 CSS color 支持的 RGB 等值。可选项：black/blue/red/orange/green
    color: {
      type: String,
      default: () => 'blue'
    },
    // 额外的显示内容
    extra: {
      type: String,
      default: () => ''
    },
    // 宽度
    width: {
      type: String,
      default: () => ''
    },
    // 宽度
    height: {
      type: String,
      default: () => ''
    },
    marginRight: {
      type: String,
      default: () => ''
    },
  },
  mounted() {
  },
  data() {
    return {
    }
  },
  methods: {
    formatter: function (num) {
      return num.toFixed(2)
    },
    _click: function () {
    }
  },
  watch: {
  },
  components: {
    customCard, Icon, vueCountTo
  }
}
</script>

<style lang="scss">
.t-card--bordered {
  border: 0.5px solid #e4e4e4 !important;
}

.custom-statistic{
  overflow: hidden !important;
  margin-bottom: 12px !important;
  /*&:nth-child(odd) {
    margin-left: 0 !important;
    margin-right: 6px !important;
  }
  &:nth-child(even) {
    margin-left: 6px !important;
    margin-right: 0 !important;
  }*/
  .t-card__body{
    overflow: hidden !important;
    vertical-align: middle;
  }
  text-align: center;
  .title{
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--td-text-color-primary);
  }
  .extra{
    font-size: 12px;
    color: var(--td-text-color-secondary);
    zoom: 80%;
  }
  .value-box{
    position: relative;
    font-size: 28px;
    height: 38px;
    line-height: 38px;
    .value{
      padding: 0 3px;
    }
    .unit{
      font-size: 18px;
      position: absolute;
      bottom: -2px;
    }
  }

}
</style>
